import Vue from "vue";

const state = {
  clientHeight: null,
  errorInfo: null,
  showLoading: false,
  loadingText: "加载中",
  showAlert: false,
  alertContent: "",
  showToast: false,
  toastText: "",
  pagePosition: {},
  currentPageName: "",
  appMode: "web",
  pageTitle: "",
  uploadImgAttr: {
    width: 375,
    height: 250
  },
  shareData: {
    title: "",
    link: "",
    imgUrl: ""
  },
  playerOptions: {
    width: "360",
    autoplay: false,
    muted: true,
    preload: "auto",
    language: "zh-CN",
    playbackRates: [0.7, 1.0, 1.5, 2.0],
    aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    sources: [
      {
        type: "video/mp4",
        src: "https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8"
      }
    ],
    poster: ""
  }
};

const getters = {
  getClientHeight: state => state.clientHeight,
  getErrorInfo: state => state.errorInfo,
  showLoading: state => state.showLoading,
  loadingText: state => state.loadingText,
  showAlert: state => state.showAlert,
  alertContent: state => state.alertContent,
  showToast: state => state.showToast,
  toastText: state => state.toastText,
  pagePosition: state => {
    return state.pagePosition;
  },
  pageTitle: state => state.pageTitle,
  appMode: state => state.appMode,
  uploadImgAttr: state => state.uploadImgAttr,
  playerOptions: state => state.playerOptions
};

const actions = {
  updatePagePosition({ commit }, pos) {
    commit("setPagePosition", pos);
  },
  updateCurrentPageName({ commit }, pageName) {
    commit("setPageName", pageName);
  },
  updatePageTitle({ commit }, title) {
    commit("setPageTitle", title);
  },
  updateVideoOptions({ commit }, obj) {
    commit("setVideoOptions", obj);
  }
};

const mutations = {
  setVideoOptions(state, obj) {
    console.log(obj);
    state.playerOptions.poster = obj.poster;
    state.playerOptions.sources[0].src = obj.src;
  },
  setClientHeight(state, value) {
    state.clientHeight = value;
  },
  setError(state, { value }) {
    state.errorInfo = value;
  },
  setLoadingText(state, text) {
    state.loadingText = text;
  },
  setLoading(state, { show }) {
    state.showLoading = show;
  },
  setAlert(state, { show }) {
    state.showAlert = show;
  },
  setAlertContent(state, content) {
    state.alertContent = content;
  },
  setToast(state, { show }) {
    state.showToast = show;
  },
  setToastText(state, text) {
    state.toastText = text;
  },
  setPagePosition(state, { pageName, position }) {
    // console.log(pageName, position)
    Vue.set(state.pagePosition, pageName, { top: position });
  },
  setPageName(state, pageName) {
    state.currentPageName = pageName;
  },
  setPageTitle(state, pageTitle) {
    state.pageTitle = pageTitle;
  },
  setAppMode(state, mode) {
    state.appMode = mode;
  }
};

export default {
  state,
  getters,
  actions,
  mutations
};
